<template>
	<view class="my-container">
		<!-- 用户信息头部 -->
		<view class="user-header">
			<view class="user-info">
				<image class="user-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
				<view class="user-detail">
					<text class="user-name">{{userInfo.name}}</text>
					<text class="user-level">{{userInfo.level}}</text>
				</view>
			</view>
			<view class="user-stats">
				<view class="stat-item" @click="navigateToBalance">
					<text class="stat-value">¥{{userInfo.balance}}</text>
					<text class="stat-label">余额</text>
				</view>
				<view class="stat-item" @click="navigateToPoints">
					<text class="stat-value">{{userInfo.points}}</text>
					<text class="stat-label">积分</text>
				</view>
				<view class="stat-item" @click="navigateToCoupon">
					<text class="stat-value">{{userInfo.couponCount}}</text>
					<text class="stat-label">优惠券</text>
				</view>
			</view>
		</view>

		<!-- 订单相关 -->
		<view class="order-section">
			<view class="section-header">
				<text class="section-title">我的订单</text>
				<text class="section-more" @click="navigateToMyOrder">查看全部 ></text>
			</view>
			<view class="order-status">
				<view class="status-item" v-for="item in orderStatus" :key="item.type" @click="navigateToOrderList(item.type)">
					<text class="status-icon">{{item.icon}}</text>
					<text class="status-label">{{item.label}}</text>
					<text class="status-badge" v-if="item.count > 0">{{item.count}}</text>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-group" v-for="group in menuGroups" :key="group.title">
				<view class="menu-title">{{group.title}}</view>
				<view class="menu-list">
					<view class="menu-item" v-for="item in group.items" :key="item.name" @click="handleMenuClick(item)">
						<view class="menu-left">
							<text class="menu-icon">{{item.icon}}</text>
							<text class="menu-name">{{item.name}}</text>
						</view>
						<text class="menu-arrow">></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 用户信息
const userInfo = ref({
	avatar: '/static/test/NoOrders_5.png',
	name: '用户昵称',
	level: '普通会员',
	balance: '0.00',
	points: '0',
	couponCount: '0'
})

// 订单状态
const orderStatus = ref([
	{ type: 'pending', label: '待付款', icon: '💰', count: 0 },
	{ type: 'paid', label: '待使用', icon: '📦', count: 0 },
	{ type: 'used', label: '待评价', icon: '⭐', count: 0 },
	{ type: 'refund', label: '退款/售后', icon: '🔄', count: 0 }
])

// 功能菜单
const menuGroups = ref([
	{
		title: '会员服务',
		items: [
			{ name: '会员卡', icon: '💳', path: '/pages_my/member/index' },
			{ name: '会员等级', icon: '🏆', path: '/pages_my/memberType/index' },
			{ name: '优惠券', icon: '🎫', path: '/pages_my/coupon/index' },
			{ name: '积分中心', icon: '✨', path: '/pages_my/points/index' }
		]
	},
	{
		title: '我的活动',
		items: [
			{ name: '拼团', icon: '👥', path: '/pages_my/group/index' },
			{ name: '收藏夹', icon: '❤️', path: '/pages_my/collection/index' },
			{ name: '邀请好友', icon: '👋', path: '/pages_my/invitation/index' }
		]
	},
	{
		title: '地址管理',
		items: [
			{ name: '收货地址', icon: '📍', path: '/pages_my/address/index' }
		]
	},
	{
		title: '其他功能',
		items: [
			{ name: '我的二维码', icon: '📱', path: '/pages_my/qrCode/index' },
			{ name: '设置', icon: '⚙️', path: '/pages/settings/index' }
		]
	}
])

// 导航方法
const navigateToBalance = () => {
	uni.navigateTo({
		url: '/pages_my/balance/index'
	})
}

const navigateToPoints = () => {
	uni.navigateTo({
		url: '/pages_my/points/index'
	})
}

const navigateToCoupon = () => {
	uni.navigateTo({
		url: '/pages_my/coupon/index'
	})
}

const navigateToMyOrder = () => {
	uni.navigateTo({
		url: '/pages_my/myOrder/index'
	})
}

const navigateToOrderList = (type) => {
	uni.navigateTo({
		url: `/pages_my/myOrder/index?type=${type}`
	})
}

const handleMenuClick = (item) => {
	if( item.path=='/pages/settings/index'){
		uni.showToast({
			title: '跳转设置页面',
			icon: 'none',
			mask: false
		})
		return;
	}
	if (item.path) {
		uni.navigateTo({
			url: item.path
		})
	}
}

onLoad(() => {
	console.log('我的页面加载')
})
</script>

<style scoped>
.my-container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

/* 用户信息头部 */
.user-header {
	background: linear-gradient(135deg, #ff6b6b, #ee5a24);
	padding: 60rpx 30rpx 40rpx;
	color: white;
}

.user-info {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
}

.user-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	border: 4rpx solid rgba(255, 255, 255, 0.3);
	margin-right: 30rpx;
}

.user-detail {
	flex: 1;
}

.user-name {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.user-level {
	font-size: 24rpx;
	background: rgba(255, 255, 255, 0.2);
	padding: 8rpx 20rpx;
	border-radius: 20rpx;
}

.user-stats {
	display: flex;
	justify-content: space-around;
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-value {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.stat-label {
	font-size: 24rpx;
	opacity: 0.8;
}

/* 订单相关 */
.order-section {
	background: white;
	margin: 20rpx;
	border-radius: 15rpx;
	padding: 30rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.section-more {
	font-size: 26rpx;
	color: #999;
}

.order-status {
	display: flex;
	justify-content: space-around;
}

.status-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.status-icon {
	font-size: 48rpx;
	margin-bottom: 15rpx;
}

.status-label {
	font-size: 24rpx;
	color: #666;
}

.status-badge {
	position: absolute;
	top: -10rpx;
	right: 10rpx;
	background: #ff4757;
	color: white;
	border-radius: 20rpx;
	min-width: 30rpx;
	height: 30rpx;
	font-size: 20rpx;
	text-align: center;
	line-height: 30rpx;
}

/* 功能菜单 */
.menu-section {
	margin: 20rpx;
}

.menu-group {
	background: white;
	border-radius: 15rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
}

.menu-title {
	font-size: 28rpx;
	color: #999;
	padding: 30rpx 30rpx 20rpx;
}

.menu-list {
	border-top: 1rpx solid #f5f5f5;
}

.menu-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-left {
	display: flex;
	align-items: center;
}

.menu-icon {
	font-size: 36rpx;
	margin-right: 20rpx;
}

.menu-name {
	font-size: 28rpx;
	color: #333;
}

.menu-arrow {
	font-size: 24rpx;
	color: #ccc;
}
</style>